<template>
	<div class="user-profile">
		<!-- 头部 -->
		<van-nav-bar title="个人中心" left-arrow @click-left="$router.back()"></van-nav-bar>
		<div class="container">
			<input type="file" hidden id="file" accept="image/*" ref="file" @change="change">
			<!-- /导航栏 -->
			<van-cell title="头像" center>
				<label for="file">
					<van-image width="50" height="50" round fit="cover" :src="userInfo.avatar" />
				</label>
			</van-cell>
			<van-cell title="昵称" is-link :to="{path:'/edit',query:{nickname: userInfo.nickname}}" :value="userInfo.nickname" />
			<van-cell title="性别" is-link @click="sexPickerShow = true" :value="userInfo.sex||'请选择性别'"/>
			<!--性别选择器  -->
			<van-popup
				v-model="sexPickerShow"
				position="bottom"
				>
				<van-picker @confirm="sexPickerConfirm" @cancel="sexPickerShow = false" title="请选择" show-toolbar :columns="['男','女']" />
				</van-popup>
			
			<!--  -->
			<van-cell @click="datePickerShow = true" title="生日" is-link :value="userInfo.birthday||'请选择生日'" />
			<!-- 生日选择器 -->
				<van-popup
				v-model="datePickerShow"
				position="bottom"
				>
				<van-datetime-picker
					@confirm="datePickerConfirm" 
					@cancel="datePickerShow = false"
					type="date"
					:value="userInfo.birthday?new Date(userInfo.birthday):new Date(2000,0,1)"
					title="选择年月日"
					:min-date="minDate"
					:max-date="maxDate"
					/>
				
				</van-popup>

			<!--  -->
			<div style="margin: 30px 50px;">
				<van-button round block type="primary" size="normal" :square="true" native-type="submit" @click="submit">确定</van-button>
			</div>
		</div>
	</div>
</template>
<script>
import { mapActions } from 'vuex';
import{editUserInfo}from'@/api/user'
import sexPickerMixin from "./sexpickerMixin"
import datePickerMixin from "./datepickerMixin "
export default {
	name: "userInfo",
	data() {
		return {
			userInfo: {},
		}
},
		mixins:[sexPickerMixin,datePickerMixin],
	mounted(){
		
		console.log(this.userInfo);
		
	},
		//keep-alive后增加了两个新的生命后期 钩子   activated 的加载时期比较晚
		// 添加了 keep-alive以后mounted只会走一回  所以要把mounted里的代码移动到activated里面
		
		// 添加了 keep-alive以后又增加了两个生命周期钩子(激活activated,失活deactivated)  
		/*激活 :加了keep-alive以后,在页面的隐藏或者切换的过程中,不是销毁而是把他的虚拟dom放到了一个对象中间(相当于把他冰封 沉眠了)( activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用);
			1. beforeMount=>别的路由进来(destroyed/deactivated)=>
			2. mounted=> activated 进入缓存组件 => 执行 beforeRouteEnter回调
			因为组件被缓存了,再次进入缓存路由/组件时,不会触发这些钩子：beforeCreate ,created ,beforeMount ,mounted 。
			所以之后的调用时机是:组件销毁destroyed/或离开缓存deactivated => activated 进入当前缓存组件 => 执行 beforeRouteEnter回调*/
			
		/*失活 :组件被停用(离开路由)时调用,使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁),因为组件没被销毁,被缓存起来了。
			这个钩子可以看作beforeDestroy的替代,如果你缓存了组件,要在组件销毁的时候做一些事情，你可以放在这个钩子里。
			如果你离开了路由，会依次触发:组件内的离开当前路由钩子beforeRouteLeave =>  路由前置守卫 beforeEach =>全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)
			// 如果离开的组件没有缓存的话 beforeDestroy会替换deactivated 
			// 如果进入的路由也没有缓存的话  全局后置钩子afterEach=>销毁 destroyed=> beforeCreate等*/

	activated(){
	let nickname = sessionStorage.getItem('nickname')
			if(nickname){
				this.userInfo.nickname = nickname
			}
		},	
	
	 //  被缓存的组件 加入到缓存时  
	deactivated(){
		console.log('加入到缓存')
	},


	// computed:{
	// 	// userInfo(){
	// 	// 	//个人信息与我的的页面 头像保持一致
	// 	// 	//方案一  问题  会污染vuex 数据
	// 	// 	return this.$store.state.userInfo
	// 	// }
	// },
	watch: {
		//数据不会污染  刷新也能拿到数据
		'$store.state.userInfo': {
			immediate: true,//初始化后立刻进行监听
			handler(n,o) {
				this.userInfo = JSON.parse(JSON.stringify(n))
			}
		}
	},
	methods: {
		...mapActions(['upload']),
		
		async change(e){
			//没有使用vant   封装成vant
			console.log()
			let file = e.target.files[0]
			//前端预览 fileReader base64
			this.userInfo.file = file
			let fileReader = new FileReader()
			fileReader.readAsDataURL(file)
			fileReader.onload = (e) => {
				this.userInfo.avatar = e.target.result
			}
			// 	let fileList = [{
			// 		file,// 和vant上传组件形状一样
			// 	}];
			// let res = await this.upload(fileList)
			// console.log(res)
		},
	async submit(){
			let  {_id,nickname,file,avatar,sex='',birthday='' }=this.userInfo 
				if(file){
					//证明上传头像
						let fileList = [{
							file,// 和vant上传组件形状一样
							}];
					let res = await this.upload(fileList)
					avatar = res[0]
				}
				editUserInfo({
					uid:_id,nickname,avatar,sex,birthday
				}).then(res=>{
					console.log(res)
					this.$toast(res,...mapGetters('namespace', ['featureGetter']),)
					//更新成功后 需要返回 更新一下vuex
					//最快 的方式重新调接口
				
        ///  改完数据后   返回 竟然没同步
     this.$toast(res.msg)
       if(res.code == 0){
            
           //  通知服务器  已经改了 
          //  但是  本地的vuex的数据还没改
          
          //  1. 直接调接口   严谨 但是浪费了一点点
          this.$store.dispatch('getUserInfo',localStorage.getItem('token'))

//  2.  本地修改

      // this.$store.commit('change',{
      //   key:'userInfo',
      //   value:{
      //      _id, 
      //     nickname,
      //     avatar,
      //     sex,
      //     birthday,
      //   }
      // })
            setTimeout(v=>{
              this.$router.back()
            },500)
       }
    

				})
		}

	}
	// created(){
	// 	//数据回填
	// 	//深度拷贝了一下vuex里的userInfo
	// 	//问题是 刷新之后 拿不到图片数据 vuex
	// 	//this.userInfo = JSON.parse(JSON.stringify(this.$store.state.userInfo));
	// }
}

</script>
<style scoped lang="less">
.van-popup {
	background-color: #f5f7f9;
}

.update-photo-popup {
	background-color: #000;
}

.name-field-wrap {
	padding: 10px;
}

.update-photo {
	height: 100%;
}

.toolbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
}

/* Ensure the size of the image fit the container perfectly */
.image {
	display: block;

	/* This rule is very important, please don't ignore this */
	max-width: 100%;
}
</style>
